<template>
  <div class="app-container">
    <el-row class="row bg-white">
      <div v-if="chargeShow">
        <el-form  :model="chargeForm" :rules="chargeRules" ref="chargeForm"  label-position="left">
          <span class="title">充值</span>
          <hr>
          <el-form-item style="height: 40px" label="充值金额" >
            <el-radio-group v-model="radio_price"  @change = "handlePriceChange" style="margin-left: 50px">
              <el-radio :label="500">500</el-radio>
              <el-radio :label="1000">1000</el-radio>
              <el-radio :label="5000">5000</el-radio>
              <el-radio :label="-1">自定义</el-radio>
            </el-radio-group>
            <el-form-item style="position: relative;top:-45px;left:450px;width:20%;" prop="amount">
              <el-input prop="amount" size="small" v-if="showPrice" v-model ='chargeForm.amount' style="width:150px;"></el-input>
              <span v-if="showPrice">元</span>
            </el-form-item>
          </el-form-item>
        </el-form>
        <el-row>
          <el-select clearable filterable class="filter-item" size="small" v-model="chargeForm.userid" placeholder="选择用户">
            <el-option v-for="item in userOptions" :key="item.key" :label="item.text" :value="item.key">
            </el-option>
          </el-select>
        </el-row>
        <el-row>
          <el-button type="primary" :disabled="btnDisable" class="green-btn m-bt-20" size="small"  style="margin-top:20px;width: 120px" @click="handleCharge">确认充值</el-button>
        </el-row>
      </div>
      <el-table :data="list"  element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label='充值人' >
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>
        <el-table-column label="企业/个人">
          <template slot-scope="scope">
            {{scope.row.group_name_cn}}
          </template>
        </el-table-column>
        <el-table-column label="身份证号码">
          <template slot-scope="scope">
            {{scope.row.idcard}}
          </template>
        </el-table-column>
        <el-table-column label="手机号码">
          <template slot-scope="scope">
            {{scope.row.phone}}
          </template>
        </el-table-column>
        <el-table-column label="充值金额">
          <template slot-scope="scope">
            {{scope.row.amount}}
          </template>
        </el-table-column>
        <el-table-column label="备注" align="center">
          <template slot-scope="scope">
            {{scope.row.remarks}}
          </template>
        </el-table-column>
        <el-table-column label="充值时间" align="center">
          <template slot-scope="scope">
            {{scope.row.pay_time}}
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="listQuery.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="listQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
import { exprotList } from '@/api/user'
import { charge, charegeRecord } from '@/api/payment'
import { validateAmount } from '@/utils/validate'
import { in_array } from '@/utils/index'

export default {
  name: 'recharge',
  data() {
    const validateMoney = (rule, value, callback) => {
      if (!validateAmount(value)) {
        callback(new Error('请输入正确的金额数值'))
      } else {
        callback()
      }
    }
    return {
      list: [],
      total: null,
      radio_price: 500,
      showPrice: false,
      btnDisable: false,
      userOptions: [],
      listQuery: {
        page: 1,
        pageSize: 20
      },
      chargeForm: {
        amount: '',
        userid: ''
      },
      chargeRules: {
        amount: [{ required: true, trigger: 'blur', validator: validateMoney },
          { min: 1, max: 10, message: '请输入充值金额(1-7位)', trigger: 'blur' }]
      },
      chargeShow: false
    }
  },
  created() {
    const role = sessionStorage.getItem('group')
    if (role === 'personal' || role === 'enterprise') {
      this.chargeShow = false
    }
    const btnList = this.$store.getters.buttons
    if (in_array('btnCharge', btnList)) {
      this.chargeShow = true
    }
    this.getUserList()
    this.getChargeList()
  },
  methods: {
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getChargeList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getChargeList()
    },
    getUserList() {
      exprotList().then(response => {
        if (response.code === 1) {
          for (const item of response.data) {
            var data = {}
            if (item.group_name === '企业') {
              data.key = item.user_id
              data.text = item.company_name
            } else {
              data.key = item.user_id
              data.text = item.name
            }
            this.userOptions.push(data)
          }
        }
      })
    },
    getChargeList() {
      charegeRecord(this.listQuery).then(response => {
        if (response.code === 1) {
          this.list = response.data.list
          this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1.5 * 1000)
        }
      })
    },
    handlePriceChange() {
      switch (this.radio_price) {
        case 500:
          this.showPrice = false
          this.chargeForm.amount = 500
          break
        case 1000:
          this.showPrice = false
          this.chargeForm.amount = 1000
          break
        case 5000:
          this.showPrice = false
          this.chargeForm.amount = 5000
          break
        case -1:
          this.showPrice = true
          break
      }
    },
    handleCharge() {
      if (this.radio_price === -1) {
        this.$refs.chargeForm.validateField('amount', (valid) => {
          if (!valid.length) {
            charge(this.chargeForm).then(response => {
              if (response.code === 1) {
                this.$message({
                  title: '成功',
                  message: '充值成功',
                  type: 'success',
                  duration: 3000
                })
                this.getChargeList()
              } else {
                setTimeout(() => {
                  this.$message.error(response.msg)
                }, 3 * 1000)
              }
            })
          }
        })
      } else {
        charge(this.chargeForm).then(response => {
          if (response.code === 1) {
            this.$message({
              title: '成功',
              message: '充值成功',
              type: 'success',
              duration: 3000
            })
            this.getChargeList()
          } else {
            setTimeout(() => {
              this.$message.error(response.msg)
            }, 3 * 1000)
          }
        })
      }
    }
  }
}
</script>

